<!--  -->
<template>

  <div class='tab-box'>

    <!--工具条 查询-->
    <div>
      <el-form :inline="true"
               >
                <el-form-item>
        <el-button type="primary"
                     @click="goback">重置搜索</el-button>
        </el-form-item>
        <el-form-item >
          <el-input v-model="search"
                    placeholder="请输入搜索内容"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="Search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleAdd">新增</el-button>
          <el-button type="primary"
                     @click="export_Xls()">导出</el-button>
          
        </el-form-item>
       
      </el-form>
    </div>

    <!--列表-->
    <el-table ref="multipleTable"
              :data="outinfo.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              tooltip-effect="dark"
              style="width: 100%"
              height="400px"
              @selection-change="selsChange"
              v-loading="loading"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">

      <el-table-column fixed
                       type="selection"
                       width="55">
      </el-table-column>

      <el-table-column prop="robot_part"
                       label="零件"
                       width="120">
      </el-table-column>

      <el-table-column prop="part_get_people"
                       label="领用人"
                       width="120">
      </el-table-column>

      <el-table-column prop="part_get_time"
                       label="领用时间"
                       width="120">
      </el-table-column>
      <el-table-column prop="others"
                       label="领用用途"
                       width="400">
      </el-table-column>
      <el-table-column label="操作"
                       width="150"
                       fixed="right">
        <template slot-scope="scope">
          <el-button size="small"
                     @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button size="small"
                     type="danger"
                     @click="handleDel(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--工具条 批量删除-->
    <div class="toolbar">
      <el-button type="danger"
                 @click="batchRemove"
                 >批量删除</el-button>
      <el-pagination style="float:right;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    
                    :current-page="currentPage"
                    :page-sizes="[10,20,50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="outinfo.length">
      </el-pagination>
    </div>

    <!--编辑新增 界面-->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogVisible">
      <el-form :model="editForm"
               label-width="80px"
               ref="editForm"
               :rules="editFormRules">
        <el-form-item label="零件"
                      prop="robot_part" v-if="dialogStatus=='update'">
          <el-input v-model="editForm.robot_part"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="零件"
                      prop="robot_part" v-else>

          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedParts" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="part in allparts" :label="part" :key="part">{{part}}</el-checkbox>
          </el-checkbox-group>
        
        </el-form-item>
          <el-form-item label="领用人"
                      prop="part_get_people">
          <el-input v-model="editForm.part_get_people"
                    auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="领用时间">
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="editForm.part_get_time"></el-date-picker>
        </el-form-item>
        <el-form-item label="领用用途">
          <el-input type="textarea"
                    v-model="editForm.others"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   @click.native="dialogVisible = false">取 消</el-button>
        <el-button size="small"
                   v-if="dialogStatus=='create'"
                   type="primary"
                   @click="createData">添 加</el-button>
        <el-button size="small"
                   v-else
                   type="primary"
                   @click="updateData">修 改</el-button>
      </span>
    </el-dialog>

    


  </div>
</template>

<script>

import { Outinfo,Rmoutinfo,Addoutinfo,Updtoutinfo} from "../../api/api.js";
import date from '../../utils/date.js';
const partOptions = ['LTE无线棒子', 'grove扩展接口板',  'SIM卡',
'arduino usb线', '半高网卡转接头', '8265网卡转接线', '充电接收端底座',
'realsense摄像头', 'ups电源', 'AR9382网卡', '马甲',
'8265无线网卡', '雷达罩壳', '雷达',
'安装铜柱', 'usb网卡', '扩展电源', 'usb2.0延长线',
'micro usb3.0公转母', '超声波传感器', '尾部防撞盖', '机器人主体',
'尾部防撞杆', '雷达线仓', 'arduino传感器板', '散热风扇',
'主板', 'WIFI延长线', 'wifi增强天线', '雷达延长线','雷达底座','AR9382网卡转接线'];

export default {
  
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      checkAll: false,
      checkedParts: [],
      allparts: partOptions,
      isIndeterminate: true,

      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      loading: false,
      // filters: {
      //   name: ''
      // },
      search: '',
      outinfo: [],
      total: 100,
      page: 1,
      sels: [],  //列表选中列
      dialogVisible: false,
      editForm: { // 编辑界面数据
        id: "",
        robot_part: "",
        part_get_people: "",
        part_get_time: "",
        others: "",
      },
      // 验证必填提示
      editFormRules: {
        part_get_people: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        part_get_time: [{ required: true, message: "请输入时间", trigger: "blur" }]
      },
      addFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
    };
  },

  created () {
    this.get_out_info() ;
  },

  methods: {
        handleSizeChange:function(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        handleCurrentChange:function(val) {
            this.currentPage = val;
        },

      handleCheckAllChange(val) {
        this.checkedParts = val ? partOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.allparts.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allparts.length;
      },
    

      get_out_info() {
      Outinfo().then(resp => {
        this.outinfo = resp.data
        console.log('Outinfo --->', resp.data);
       }).catch(error => {
        console.log(error);
      });
    },

    // 全选单选多选
    selsChange (sels) {
      this.sels = sels;
      console.log(sels);
    },

    // 显示编辑 界面
    handleEdit (index, row) {
      this.dialogVisible = true;
      this.dialogStatus = "update";
      this.editForm = Object.assign({}, row);
    },

    // 编辑 确定按钮
    updateData () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗?", "提示", {}).then(() => {
            
            let para = Object.assign({}, this.editForm);
            let id = para['id'];
            console.log(para);
            console.log(id);
            para.part_get_time = !para.part_get_time || para.part_get_time == "" ? "" : date.formatDate.format(new Date(para.part_get_time), "yyyy-MM-dd");
            Updtoutinfo(para,id).then(res => {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["editForm"].resetFields();
              this.dialogVisible = false;
              this.get_out_info();
            })
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },

    // 显示新增 界面
    handleAdd () {
      this.dialogVisible = true;
      this.dialogStatus = "create";
      this.editForm = {

      }
    },
    // 新增 确定按钮
    createData () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            console.log(this.checkedParts);
            for (var i = 0 ;i <this.checkedParts.length;i++){
              let para = Object.assign({}, this.editForm);
              para.robot_part= this.checkedParts[i];
              console.log(para);
              
              para.part_get_time = !para.part_get_time || para.part_get_time == "" ? "" : date.formatDate.format(new Date(para.part_get_time), "yyyy-MM-dd");
              Addoutinfo(para).then(res => {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.$refs["editForm"].resetFields();
             this.dialogVisible = false;
             this.get_out_info();
                
              })
              
            }
          }).catch(err => {
            console.log(e)
          })
        }
      })
    },

    // 删除记录
    handleDel (index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.editForm = Object.assign({}, row);
        let para = Object.assign({}, this.editForm);
        let id = para['id'];
        console.log(id);
        Rmoutinfo(id).then(res => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.get_out_info()
        })
      }).catch(() => { });
    },

  // 批量删除
    batchRemove () {
      var ids = this.sels.map(item => item.id);
      console.log(ids);
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {

      for (var i = 0 ;i<ids.length;i++){
        console.log(i);
        console.log(ids[i]);
        Rmoutinfo(ids[i]).then(res => {

          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.get_out_info();
        })}
      
      }).catch(() => { });
      
    },
    Search() {
      // search 是 v-model="search" 的 search
      var search = this.search;
      if (search) {
        this.outinfo = this.outinfo.filter(function(product) {
          // 每一项数据
          // console.log(product)
          return Object.keys(product).some(function(key) {
            // 每一项数据的参数名
            // console.log(key)
            return (
              String(product[key])
                // toLowerCase() 方法用于把字符串转换为小写。
                .toLowerCase()
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                .indexOf(search) > -1
            );
          });
        });
      }else{this.get_out_info();}
    },
    goback() {
      this.search='';
      this.get_out_info();
    },
    export_Xls(){
      var a = document.createElement('a');
      var url = 'http://192.168.28.110:9000/api/kucun/export_xls_out';
      var filename = 'data.xlsx';
      a.href=url;
      a.download = filename;
      a.click()
  }

  //生命周期 - 创建完成（可以访问当前this实例）
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // this.get_get_out_info();
  },
  
}
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.tab-box {
  background-color: #fff;
  padding: 20px;
}
.toolbar {
  margin-top: 10px;
}

</style>